<template>
  <div class="pro-product">
    <div class="pro-header">
      <input
        type="text"
        placeholder="请输入姓名，如果不更新，点击右侧搜索按钮"
        class="ipt"
      />
      <el-button
        type="primary"
        plain
        class="iconfont icon-sousuo search"
      ></el-button>
      <el-button type="primary" @click="addStu" v-has="'add'">添加项目</el-button>
    </div>
    <div class="middle">
      选择班级：<el-select v-model="classes"
      @visible-change="classVisible"
      @change="classChange"
      slot="prepend" placeholder="请选择">
        <el-option label="全部" value="all"></el-option>
        <el-option v-for="(item,index) in classOptions" :key="index" :label="item" :value="item"></el-option>
      </el-select>
    </div>
    <div class="pro-list">
      <el-table :data="proList" border>
        <el-table-column prop="headimgurl" label="头像" align="center">
          <template v-slot="scope">
           <el-avatar shape="square"
              fit="fill"
              :size="50"
              :src="scope.row.headimgurl"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="degree" label="学历" align="center">
        </el-table-column>
        <el-table-column prop="class" label="班级" align="center">
        </el-table-column>
        <el-table-column prop="description" label="项目" align="center">
        </el-table-column>
        <el-table-column prop="cTime" label="创建时间" align="center">
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center">
          <template v-slot="{ row }">
            <el-button type="primary" class="min-btn" v-has="'read'" @click="detMsg(row)"
              ><i class="iconfont icon-chakan"></i>查看</el-button
            >
            <el-button type="primary" @click="editStu(row)" class="min-btn" v-has="'edit'"
              ><i class="iconfont icon-bianji"></i>编辑</el-button
            >
            <el-button type="primary" @click="deletStu(row)" class="min-btn del-btn" v-has="'delete'"
              ><i class="iconfont icon-icon"></i
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination background 
      hide-on-single-page
      layout="prev, pager, next" 
      @current-change="changePage"
      :page-size="stuPagesize"
      :total="stuTotal">
      </el-pagination>
    </div>
    <!-- 弹出框 -->
    <crm-dialog></crm-dialog>
  </div>
</template>
<script>
import dialog from "../../../components/dialog";
import * as api from "../../../api/index";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {
      select: "",
      classOptions: [],
      disabled: false,
      classes: "",
      searchList: [],
      searchValue: "",
      blurSearchValue: "",
      list: [],
    };
  },
  components: {
    "crm-dialog": dialog,
  },
  created() {
    this.GET_PROLIST();
  },
  computed: {
    ...mapState(["proList","stuTotal","stuPagesize"]),
  },
  methods: {
    ...mapActions(["GET_PROLIST","GET_STUMSG"]), //获取学员项目列表
    ...mapMutations(["SHOW_DIALOG", "CHANGE_DIALOGTITLE", "SET_CURRENTROW"]),
    addStu() {
      this.CHANGE_DIALOGTITLE("增加学员信息"), this.SHOW_DIALOG();
    },
    editStu(row) {
      this.CHANGE_DIALOGTITLE("编辑学员信息"),
        this.SHOW_DIALOG(),
        this.SET_CURRENTROW(row);
    },
    deletStu(row) {
      console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.delStu(row.sId).then((res) => {
            console.log(res.data  );
            if (res.data.state) {
                console.log(333);
                this.GET_PROLIST()
                this.$message({
                type: "success",
                message: "删除成功!",
              });
            }else{
                this.$message.error('删除失败，数据不存在');
            }
          });
        })
        .catch(() => {
          console.log(222);
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    classVisible(isVisible){
        if(isVisible){
            api.getClass()
            .then(res=>{
                this.classOptions = res.data.data
                console.log(this.classOptions);
            })
        }
    },
    classChange(query){
        // console.log(query);
        if(query==="all"){
            query = ""
        }
        this.GET_PROLIST({classes: query})
    },
    changePage(page){
        this.GET_PROLIST({page})
    },
    detMsg(row){
      this.GET_STUMSG(row),
      this.$router.push("/studentManager/message")
    }
  }
};
</script>
<style>
.pro-header {
  margin: 50px 0;
}
.ipt {
  width: 300px;
  height: 40px;
  border: 1px solid #dcdfe6;
  color: #606266;
  line-height: 40px;
  border-radius: 4px;
  padding: 0 15px;
}
.pro-list {
  margin-top: 50px;
}
.pro-list img {
  width: 50px;
  height: 50px;
}
.search {
  color: #409eff;
  white-space: nowrap;
  cursor: pointer;
  height: 40px;
}
.el-select-dropdown__list {
  width: 544px;
}
.el-select-dropdown__item {
  width: 544px;
  height: 34px;
}
.min-btn {
  width: 65px;
  height: 25px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  padding: 0 !important;
}
.del-btn {
  background: rgb(233, 53, 89);
}
.footer {
  text-align: center;
  margin-top: 20px;
}
</style>